{% extends "ik/base.html" %}

{% block title %}Expansion Planner{% endblock %}

{% block head_interior %}
	<script language="javascript" src="http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.2.2/dojo.js"></script>
{% endblock %}


{% block main_content %}
	<h1>Expansion Planner</h1>

	{% if form.errors %}
		<dd class="errors">{{ form.errors }}</dd>
	{% endif %}

	<form action="" method="get" id="formExpansion">
		<h4>What island will launch the fleet?</h4>

		<p>Position: {{ form.ocean }} : {{ form.group }} : {{ form.isle_num }}</p>

		<script type="text/javascript"><!--
		google_ad_client = "pub-7423629205927780";
		google_ad_width = 234;
		google_ad_height = 60;
		google_ad_format = "234x60_as";
		google_ad_type = "text_image";
		google_ad_channel = "";
		google_color_border = "FFFFFF";
		google_color_bg = "FFFFFF";
		google_color_link = "0616F3";
		google_color_text = "000000";
		google_color_url = "6BB6E1";
		//-->
		</script>
		<script type="text/javascript"
		  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>

		<h4>Select the kinds of islands to search for:</h4>
		<ul>
			<li>
				{{ form.rulerless }}
				{{ form.rulerless.label_tag }}
			</li>
			<li>
				Ruled by Weak Players
				<ul>
					<li>
						{{form.low_score}}{{ form.low_score.label_tag }}
						{{ form.threshold }}
					</li>
					<li>
						{{form.weak_alliance}}{{ form.weak_alliance.label_tag }}
						{{ form.alliance_threshold }}
					</li>
					<li>
						{{form.low_island_count}}{{ form.low_island_count.label_tag }}
						{{ form.max_num_islands }}
					</li>
				</ul>
			</li>
		</ul>

		<div>
			<script type="text/javascript"><!--
			google_ad_client = "pub-7423629205927780";
			google_ad_width = 468;
			google_ad_height = 60;
			google_ad_format = "468x60_as";
			google_ad_type = "text_image";
			google_ad_channel = "";
			google_color_border = "FFFFFF";
			google_color_bg = "FFFFFF";
			google_color_link = "0616F3";
			google_color_text = "000000";
			google_color_url = "6BB6E1";
			//-->
			</script>
			<script type="text/javascript"
			  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		</div>
		<button class="positive" type="submit">Rank Islands</button>
	</form>

	{% if results %}
		<table>
			<caption>Closest Targets</caption>
			<thead>
				<th>Distance</th>
				<th>LWS Trip (hours)</th>
				<th>Colo Trip (hours)</th>
				<th>Island</th>
				<th>Position</th>
				<th>Ruler</th>
				<th>Alliance</th>
				<th>Score</th>

			</thead>
		{% for isle in results|slice:"0:20" %}
			<tr>
				<td>{{ isle.distance|floatformat:0 }}</td>
				<td>{{ isle.lws_time|floatformat:"1" }}</td>
				<td>{{ isle.colo_time|floatformat:"0" }}</td>
				<td>{{ isle.name }}</td>
				<td><a href={{isle.get_absolute_url}}>{{ isle.position }}</a></td>
				<td><a href={{isle.player_sample.get_absolute_url}}>{{isle.ruler}}</a></td>
				<td>{{ isle.alliance_tag }}</td>
				<td>{{ isle.score }}</td>

			</tr>
		{% endfor %}
		</table>
	{% endif %}
{% endblock %}

{% block body_end %}
	<script type="text/javascript">
	function onLoad()
	{
		targ = document.getElementById("id_low_score");
		targ.onchange = thresholdVisibility;

		targ = document.getElementById("id_weak_alliance");
		targ.onchange = thresholdVisibility;

		targ = document.getElementById("id_low_island_count");
		targ.onchange = thresholdVisibility;

		thresholdVisibility();
	}

	function thresholdVisibility()
	{
		node = document.getElementById("id_threshold");
		node.disabled = !document.getElementById("id_low_score").checked;

		node = document.getElementById("id_alliance_threshold");
		node.disabled = !document.getElementById("id_weak_alliance").checked;

		node = document.getElementById("id_max_num_islands");
		node.disabled = !document.getElementById("id_low_island_count").checked;
	}

	dojo.addOnLoad( function() { onLoad(); });
	</script>
{% endblock %}